<script setup lang="ts">
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Button, message, Table } from 'ant-design-vue';

import { spuBomApproval } from '#/api/spuBom';

const emit = defineEmits(['refresh']);

const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
  onCancel() {
    modalApi.close();
  },
  async onConfirm() {},
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) return;
    const { data, res } = modalApi.getData<Record<string, any>>();
    selectRows.value = res;
    rowData.value = data;
  },
});
const columns = ref([
  { title: '物料名称', dataIndex: 'materialName', align: 'center' },
  { title: '核算单价', dataIndex: 'price', align: 'center' },
  { title: '采购单价列表', dataIndex: 'notInPriceList', align: 'center' },
]);
const selectRows = ref([]);
const rowData = ref([]);

function approvalRow() {
  const parmas = {
    ids: rowData.value.map((rowData) => rowData.id),
    isConfirmApproval: true,
    is_confirm_ware: 0,
  };
  spuBomApproval(parmas).then((res: any) => {
    if (res.data.code === 0) {
      message.error(res.data.msg);
      modalApi.close();
      emit('refresh');
    } else {
      message.success(res.data.msg);
    }
  });
}
</script>

<template>
  <Modal title="检测到有核算单价问题，是否继续审核？">
    <Table
      class="w-fill"
      bordered
      :data-source="selectRows"
      :columns="columns"
      :pagination="false"
      size="small"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'price'">
          <div style="color: red">
            {{ record.price }}
          </div>
        </template>
        <template v-if="column.dataIndex === 'notInPriceList'">
          <div class="flex items-center justify-center text-center">
            <div
              v-for="(item, index) in record.notInPriceList"
              :key="item"
              style="color: red"
            >
              {{ item }}
              <span v-if="index < record.notInPriceList.length - 1">,</span>
            </div>
          </div>
        </template>
      </template>
    </Table>
    <template #footer>
      <Button type="primary" danger @click="approvalRow">继续审核</Button>
    </template>
  </Modal>
</template>

<style scoped></style>
